<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>页面滚动驱动动画</title>
    <style>
      @keyframes ScrollingAnimation {
        0% {
          width: 0;
        }

        100% {
          width: 100%;
        }
      }

      .ctnr {
        .item {
          height: 600px;
          background-color: var(--color);
          opacity: 0.3;
          animation: ScrollingAnimation auto linear;
          animation-timeline: view();
          /* 设置动画的起始和结束范围 */
          animation-range: 0 400px;
        }
      }

      /*
        可多动画组合使用：
        div{
          animation: appear 1s linear forwards,
                    disappear 1s linear forwards;
          animation-timeline: view();
          animation-range: entry,exit; 【进入过程执行appear，离开过程执行disappear】
        }
      */
    </style>
  </head>

  <body>
    <div class="ctnr">
      <div class="item"
           style="--color:red;">1</div>
      <div class="item"
           style="--color:orange;">2</div>
      <div class="item"
           style="--color:yellow;">3</div>
      <div class="item"
           style="--color:green;">4</div>
      <div class="item"
           style="--color:cyan;">5</div>
      <div class="item"
           style="--color:blue;">6</div>
      <div class="item"
           style="--color:purple;">7</div>
    </div>
  </body>

</html>
